<template>
  <div class="hospital">
    <!-- 左侧导航区 -->
   
    <div class="menu">
      <div class="top">
      <el-icon><HomeFilled/></el-icon>
      <span>/医院详情信息</span>
    </div>
      <el-menu
        :default-active="activeFlg"
        class="el-menu-vertical-demo"
      >
        <el-menu-item index="/hospital/register" @click="changActive('/hospital/register')">
          <el-icon><icon-menu /></el-icon>
          <span>预约挂号</span>
        </el-menu-item>
        <el-menu-item index="/hospital/detail"  @click="changActive('/hospital/detail')">
          <el-icon><document /></el-icon>
          <span>医院详情</span>
        </el-menu-item>
        <el-menu-item index="/hospital/notice"  @click="changActive('/hospital/notice')">
          <el-icon><setting /></el-icon>
          <span>预约通知</span>
        </el-menu-item>
        <el-menu-item index="/hospital/close"  @click="changActive('/hospital/close')">
          <el-icon><InfoFilled /></el-icon>
          <span>停诊信息</span>
        </el-menu-item>
        <el-menu-item index="/hospital/search"  @click="changActive('/hospital/search')">
          <el-icon><Search /></el-icon>
          <span>查询/取消</span>
        </el-menu-item>
      </el-menu>
    </div>
    <!-- 右侧内容展现，路由组件 -->
    <div class="content">
      <!-- 子组件展示区域 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入图标
import {Document,Menu as IconMenu,Setting,InfoFilled,Search,HomeFilled} from "@element-plus/icons-vue";
// 路由
import { useRouter , useRoute} from "vue-router";
import { onMounted } from "vue";
import useDetailStore from "@/store/modules/hospitalDetail";
let detailStore=useDetailStore()
let $router=useRouter()
let $route=useRoute()
// 使高亮始终在子路由界面位置
let activeFlg:string=$route.path
// 点击子路由携带参数保证刷新不丢失
const changActive=(path:string)=>{
  $router.push({path,query:{hoscode:$route.query.hoscode}})
}
// 挂在完毕通知pinia获取医院详情数据
onMounted(()=>{
  detailStore.getHospital($route.query.hoscode);
  detailStore.getDepartment($route.query.hoscode as string );

})
</script>

<style lang="scss" scoped>
.hospital {
  display: flex;
  .menu {
    // 分别占用了多少
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    .top{
      color: #7f7f7f;
    }
  }
  .content {
    flex: 8;
  }
}
</style>
